@charset "utf-8";
@import '_scss_function';
body{
	position:relative;
  	background: #f7f7f8;
}
@mixin media1400(){
    & .header-nav{
        & .nav-wrap{
            &.wrap {
                & .logo {
                    position: relative;
                    left: 0;
                    top: 9px;
                }
                & .loginwrap,
                & .loggedwrap {
                    position: relative;
                    right: 0;
                    top: 0;
                }
                & .loginwrap {
                    margin-top: 10px;
                }
            }
        }
    }
}
.header-nav{
	height: 60px;
	& .header-find{
		background:#fff;
		display: inline-block;
		width: 100%;
		position: relative;
		box-shadow:0 2px 5px rgba(0,0,0,.18);
		&.fixed{
			position: fixed;
			left: 0;
			top:0;
			z-index: 10;
		}
		& .nav-wrap{
			@include min-content-width;
			@include height(50px);
			padding-top: 10px;
			overflow:visible;
			background-color:#fff;
		  	margin: 0 auto;
		  	// logo图标
		  	& .logo{
	  		    @include float-left;
	  		    @include m(0 30px 0 0);
		  		cursor: pointer;
                position: absolute;
                left:25px;
                top:15px;
		  	}
		  	// 导航列表
			& .nav-list{
				//@include width(700px);
				display: inline-block;
				& .logo-wrap{
					position:relative;
				}
				& .logo{
					@include width(113px);
					@include height(31px);
					z-index:9999;
					background:url(/img/logo.png) no-repeat;
					left: -134px;
		    		top: 6px;
		    		display:none;
				}
				& ul{
					li{
						float: left;
						position: relative;
						z-index: 5;
						& > .nav-link{
                            @include height(48px);
							color:#333;
							line-height:50px;
							padding:0 15px;
							display: block;
							& .iconfont{
								font-weight: bold;
								position: relative;
								top: 2px;
								left: 2px;
							}
							& .border-triangle{
								display: none;
								position: absolute;
								left: 50%;
								top: 100%;
								width: 12px;
								height: 7px;
								background: url(../../img/base/layout-grid-triangle.png) no-repeat 0 -50px;
								margin-left: -4px;
								margin-top: 5px;
							}
						}
						&:hover{
							& > .nav-link{
                                @include nav-link();
							}
							& .border-triangle{
								display: block;
							}
							& .nav-down{
								display: block;
							}
						}
                        & .nav-down{
                            & .nav-link{
                                background-color: #de1e30;
                                background-color: rgba(222,30,48,0);
                                color: #de1e30;
                            }
                        }
					}
				}

				& .nav-down{
					display: none;
					position: absolute;
					left: 0;
					top: 100%;
					min-width: 100%;
					color: #666;
					& .nav-bar{
						float: left;
						padding: 10px 0;
						box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
						background-color: #fff;
						border-radius: 5px;
						margin-top: 10px;
						width: 190px;
						position: relative;

						& .line{
							position: absolute;
							top:10px;
							bottom: 10px;
							left: 50%;
							border-left: 1px solid #ebebeb;
						}
						& .link{
							@include transition(.2s);
							@include font-size(14px);
                            border: 0;
							margin-left: 10px;
							border-radius: 5px;
							padding: 0 0 0 10px;
							line-height: 30px;
							height: 30px;
							float: left;
							font-size: 14px;
							width: 70px;
							color: #333;
							&.none{
								color: #bbb;
							}
							&.active,
							&:hover{
								background-color: #de1e30;
								color: #fff;
							}
						}
					}
				}
			}

            & .loginwrap,
            & .loggedwrap{
                float: right;
                position: absolute;
                right: 25px;
                top: 10px;
            }
			//  登录
			& .loginwrap{
                line-height: 26px;
                top: 20px;
				& > .icon-portrait{
                    font-size: 17px;
                    color: #de1e30;
                    font-weight: bold;
                    float: left;
				}
                & .btn-white,
                & .btn-border{
                    width: 50px;
                    text-align: center;
                    line-height: 24px;
                    height: 24px;
                    border-radius: 0;
                    float: left;
                    margin-left: 10px;
                }
                & .btn-white{
                    height:26px;
                    line-height: 26px;
                }
			}
            // 登陆后
            & .loggedwrap{
                & .select-type-one{
                    position: relative;
                    z-index: 5;
                    float: left;
                    font-size: 14px;
                    margin: 1px 0 0 10px;
                    cursor: pointer;
                    color: #777;
                    & .user-ico{
                        @include transition(.2s);
                        float: left;
                        width: 40px;
                        height: 40px;
                        border-radius: 100%;
                        box-shadow: 0 0 1px #8a8a8a;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: contain;
                        position: relative;
                    }
                    & .tip{
                        float: left;
                        margin: 11px 0 0 10px;
                        & .icon-arrow{
                            top:4px;
                        }
                        & .name{
                            max-width: 85px;
                            display: inline-block;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    & .border-triangle{
                        left: 50%;
                        margin-left: -7px;
                    }
                    & .down{
                        left: 50%;
                        margin-left: -43px;
                        & > ul{
                            overflow: hidden;
                            padding:0;
                            & >li{
                                @include transition(.3s);
                                margin: 0;
                                border-radius: 0;
                                line-height: 20px;
                                padding:0;
                                &.active,
                                &:hover{
                                    color: #777;
                                    background-color: #f2f0f1;
                                }
                                & a{
                                    display: block;
                                    padding: 5px 0;
                                    color: #777;
                                }
                            }
                        }
                    }
                    &:hover{
                        & .user-ico{
                            border-radius: 8px;
                            box-shadow: 0 0 10px rgba(0,0,0,0.5);
                        }
                    }
                }
                & .line{
                    float: left;
                    border-left: 1px solid #e5e5e5;
                    height: 32px;
                    margin: 6px 10px 0;
                }
                & .my-collection{
                    @include transition(.5s);
                    float: left;
                    font-size: 14px;
                    color: #df1e31;
                    margin-top: 12px;
                    cursor: pointer;
                    & .icon-favourite{
                        font-size: 20px;
                        float: left;
                        position: relative;
                        top: -2px;
                        margin-right: 5px;
                    }
                    &:hover{
                        color: #de1e30;
                        text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
                    }
                }
            }
		}
	}
}
@media screen and (max-width: 1400px){
    body{
        @include media1400();
    }
}
.media1400{
    @include media1400();
}
